<!--
 * @jixuanyu: jixuanyu
 * @Date: 2023-06-09 13:33:43
 * @LastEditors: jixuanyu
 * @Description: file content
-->
<template>
  <div class="flexDiv flewWrap">
    <div class="btn-item">
      <p>搜索（icon）</p>
      <z-button type="primary">
        <template #icon><SearchOutlined /></template>
      </z-button>
      <span style="margin-right: 8px;"></span>
      <z-button >
        <template #icon><SearchOutlined /></template>
      </z-button>
    </div>
    <div class="btn-item">
      <p>搜索（圆角icon）</p>
      <z-button type="primary"  shape="circle">
        <template #icon><SearchOutlined /></template>
      </z-button>
      <span style="margin-right: 8px;"></span>
      <z-button  shape="circle">
        <template #icon><SearchOutlined /></template>
      </z-button>
    </div>
    <div class="btn-item">
      <p>搜索（icon+文字）</p>
      <z-button type="primary">
        <template #icon><SearchOutlined /></template>搜索
      </z-button>
      <span style="margin-right: 8px;"></span>
      <z-button >
        <template #icon><SearchOutlined /></template>搜索
      </z-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ButtonDemo1'
}
</script>
<style lang="less" scoped>
.btn-item {
  margin-left: 24px;
  text-align: center;
  .ant-btn {
    margin: auto;
  }
}
</style>
